<template>
  <div>
    <el-container>
      <el-header style="padding: 0px;display:flex;justify-content:space-between;align-items: center">
        <div style="display: inline">
          <el-input
            placeholder="通过员工名搜索员工,记得回车哦..."
            clearable
            @change="keywordsChange"
            style="width: 300px;margin: 0px;padding: 0px;"
            size="mini"
            :disabled="advanceSearchViewVisible"
            @keyup.enter.native="searchOffice"
            prefix-icon="el-icon-search"
            v-model="emp.responsible">
          </el-input>
          <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-search" @click="searchOffice">搜索
          </el-button>
          <el-button slot="reference" type="primary" size="mini" style="margin-left: 5px"
                     @click="showAdvanceSearchView"><i
            class="fa fa-lg" v-bind:class="[advanceSearchViewVisible ? faangledoubleup:faangledoubledown]"
            style="margin-right: 5px"></i>高级搜索
          </el-button>
        </div>
        <div style="margin-left: 5px;margin-right: 20px;display: inline">
          <el-upload
            :show-file-list="false"
            accept="application/vnd.ms-excel"
            action="/server/upload"
            :on-success="fileUploadSuccess"
            :on-error="fileUploadError" :disabled="fileUploadBtnText==='正在导入'"
            :before-upload="beforeFileUpload" style="display: inline">
            <el-button size="mini" type="success" :loading="fileUploadBtnText==='正在导入'">
              <i class="fa fa-lg fa-level-up" style="margin-right: 5px"></i>{{fileUploadBtnText}}
            </el-button>
          </el-upload>
          <el-button type="success" size="mini" @click="exportComputers">
            <i class="fa fa-lg fa-level-down" style="margin-right: 5px"></i>导出数据
          </el-button>
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="showAddDataView">
            新增数据
          </el-button>
        </div>
      </el-header>
      <el-main style="padding-left: 0px;padding-top: 0px">
        <div>
          <transition name="slide-fade">
            <div
              style="margin-bottom: 10px;border: 1px;border-radius: 5px;border-style: solid;padding: 5px 0px 5px 0px;box-sizing:border-box;border-color: #20a0ff"
              v-show="advanceSearchViewVisible">
              <el-row>
                <el-col :span="5">
                  当前使用公司:
                  <el-select v-model="emp.useCompany" style="width: 130px" size="mini" placeholder="当前使用公司">
                    <el-option
                      v-for="item in useCompanies"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="5">
                  使用部门:
                  <el-select v-model="emp.useDepartment" style="width: 130px" size="mini" placeholder="使用部门">
                    <el-option
                      v-for="item in useDepartments"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-button icon="el-icon-search" type="primary" size="mini" @click="searchOffice">搜索</el-button>
                  <el-button size="mini" @click="cancelSearch">取消</el-button>
                </el-col>
              </el-row>
            </div>
          </transition>
          <el-table
            :data="emps"
            v-loading="tableLoading"
            border
            stripe
            @selection-change="handleSelectionChange"
            size="mini"
            style="width: 100%">

            <el-table-column
              type="selection"
              align="left"
              width="30">
            </el-table-column>

            <el-table-column prop="responsible" align="center" fixed label="责任人" width="100"></el-table-column>
            <el-table-column prop="useCompany" label="使用公司" align="center" width="100"></el-table-column>
            <el-table-column prop="useDepartment" label="使用部门" align="center" width="100"></el-table-column>
            <el-table-column prop="machineConfiguration" label="机器配置" align="center" width="200"></el-table-column>
            <el-table-column prop="numbering" label="编号" align="center" width="200"></el-table-column>

            <el-table-column prop="referenceBrand" label="参考品牌" align="center" width="85"></el-table-column>
            <el-table-column prop="quantity" label="数量" align="center" width="85"></el-table-column>
            <el-table-column prop="unit" label="单位" align="center" width="85"></el-table-column>
            <el-table-column prop="machineState" label="机器状态" align="center" width="85"></el-table-column>
            <el-table-column prop="useState" label="使用状态" align="center" width="85"></el-table-column>

            <el-table-column prop="remarks" label="备注" align="center" width="150"></el-table-column>

            <el-table-column
              fixed="right"
              label="操作"
              width="195">
              <template slot-scope="scope">
                <el-button @click="showEditOfficeView(scope.row)" style="padding: 3px 4px 3px 4px;margin: 2px"
                           size="mini">编辑
                </el-button>
                <el-button style="padding: 3px 4px 3px 4px;margin: 2px" type="primary" size="mini">查看高级资料
                </el-button>
                <el-button type="danger" style="padding: 3px 4px 3px 4px;margin: 2px" size="mini"
                           @click="deleteEmp(scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="display: flex;justify-content: space-between;margin: 2px">
            <el-button type="danger" size="mini" v-if="emps.length>0" :disabled="multipleSelection.length==0"
                       @click="deleteManyEmps">批量删除
            </el-button>
            <el-pagination
              background
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              :current-page="currentPage"
              @size-change="sizeChange"
              @current-change="currentChange"
              layout="sizes, jumper, prev, pager, next,total"
              :total="totalCount">
            </el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>
    <el-form :model="emp" :rules="rules" ref="addEmpForm" style="margin: 0px;padding: 0px;width: 500px;">
      <div style="text-align: left;">
        <el-dialog
          :title="dialogTitle"
          style="padding: 0px;"
          :close-on-click-modal="false"
          :visible.sync="dialogVisible"
          width="77%">
          <el-row>
            <el-col :span="6">
              <div>
                <el-form-item label="责任人:" prop="responsible">
                  <el-input prefix-icon="el-icon-edit" v-model="emp.responsible" size="mini" style="width: 150px"
                            placeholder="请输入责任人姓名"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="7">
              <div>
                <el-form-item label="使用公司:" prop="useCompany">
                  <el-select v-model="emp.useCompany" style="width: 150px" size="mini" placeholder="天呈慧眼云">
                    <el-option
                      v-for="item in useCompanies"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-form-item label="使用部门:" prop="useDepartment">
                  <el-select v-model="emp.useDepartment" style="width: 100px" size="mini" placeholder="研发部">
                    <el-option
                      v-for="item in useDepartments"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>

            <el-col :span="6">
              <div>
                <el-form-item label="机器配置:" prop="machineConfiguration">
                  <el-input prefix-icon="el-icon-edit" v-model="emp.machineConfiguration" size="mini"
                            style="width: 150px"
                            placeholder="机器配置..."></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="7">
              <div>
                <div>
                  <el-form-item label="资产编号:" prop="numbering">
                    <el-input prefix-icon="el-icon-edit" v-model="emp.numbering" size="mini" style="widt50px"
                              placeholder="资产编号..."></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>

            <el-col :span="6">
              <div>
                <el-form-item label="参考品牌:" prop="referenceBrand">
                  <el-input prefix-icon="el-icon-edit" v-model="emp.referenceBrand" size="mini" style="width: 150px"
                            placeholder="参考品牌..."></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="7">
              <div>
                <el-form-item label="数量:" prop="quantity">
                  <el-input prefix-icon="el-icon-edit" v-model="emp.quantity" size="mini" style="width: 80px"
                            placeholder="数量..."></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-form-item label="单位:" prop="unit">
                  <el-select v-model="emp.unit" style="width: 70px" size="mini" placeholder="台">
                    <el-option
                      v-for="item in units"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id" style="width: 50px">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="6">
              <div>
                <el-form-item label="机器状态:" prop="machineState">
                  <el-select v-model="emp.machineState" style="width: 80px" size="mini" placeholder="正常">
                    <el-option
                      v-for="item in machineStates"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="7">
              <div>
                <el-form-item label="使用状态:" prop="useState">
                  <el-select v-model="emp.useState" style="width: 150px" size="mini" placeholder="自用">
                    <el-option
                      v-for="item in useOfStates"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-form-item label="备注:" prop="remarks">
                  <el-input prefix-icon="el-icon-edit" v-model="emp.remarks" size="mini" style="width: 180px"
                            placeholder="备注..."></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <span slot="footer" class="dialog-footer">
              <el-button size="mini" type="primary" @click="addServer('addEmpForm')">确 定</el-button>
              <el-button size="mini" @click="cancelEidt">取 消</el-button>
  </span>
        </el-dialog>
      </div>
    </el-form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        emps: [],
        keywords: '',
        fileUploadBtnText: '导入数据',
        beginDateScope: '',
        faangledoubleup: 'fa-angle-double-up',
        faangledoubledown: 'fa-angle-double-down',
        dialogTitle: '',
        multipleSelection: [],
        depTextColor: '#c0c4cc',
        nations: [],
        useCompanies: [],
        useDepartments: [],
        units: [{id: 1, name: '台'}, {id: 2, name: '套'}],
        machineStates: [{id: 1, name: '正常'}, {id: 2, name: '损坏'}],
        useOfStates: [{id: 1, name: '自用'}, {id: 2, name: '外借'}, {id: 3, name: '闲置'}],
        totalCount: -1,
        currentPage: 1,
        pageSize: 10,
        deps: [],
        defaultProps: {
          label: 'name',
          isLeaf: 'leaf',
          children: 'children'
        },
        dialogVisible: false,
        tableLoading: false,
        advanceSearchViewVisible: false,
        showOrHidePop: false,
        showOrHidePop2: false,
        emp: {
          serverId: '',
          responsible: '',
          useCompany: '',
          useDepartment: '',
          machineConfiguration: '',
          numbering: '',
          referenceBrand: '',
          quantity: '',
          unit: '',
          machineState: '',
          useState: '',
          remarks: ''
        },
        rules: {
          responsible: [{required: true, message: '必填:姓名', trigger: 'blur'}],
          referenceBrand: [{required: true, message: '必填:参考品牌', trigger: 'blur'}],
          machineConfiguration: [{required: true, message: '必填:机器配置', trigger: 'blur'}],
          quantity: [{required: true, message: '必填:quantity', trigger: 'blur'}],
        }
      };
    },
    mounted: function () {
      this.initData();
      this.loadEmps();
    },
    methods: {
      fileUploadSuccess(response, file, fileList) {
        if (response) {
          this.$message({type: response.status, message: "导入成功！"});
        }
        this.loadEmps();
        this.fileUploadBtnText = '导入数据';
      },
      fileUploadError(err, file, fileList) {
        this.$message({type: 'error', message: "导入失败!"});
        this.fileUploadBtnText = '导入数据';
      },
      beforeFileUpload(file) {
        this.fileUploadBtnText = '正在导入';
      },
      exportComputers() {
        window.open("/server/export", "_parent");
      },
      cancelSearch() {
        this.advanceSearchViewVisible = false;
        this.emptyEmpData();
        this.beginDateScope = '';
        this.loadEmps();
      },
      showAdvanceSearchView() {
        this.advanceSearchViewVisible = !this.advanceSearchViewVisible;
        this.keywords = '';
        if (!this.advanceSearchViewVisible) {
          this.emptyEmpData();
          this.beginDateScope = '';
          this.loadEmps();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      deleteManyEmps() {
        this.$confirm('此操作将删除[' + this.multipleSelection.length + ']条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = '';
          for (let i = 0; i < this.multipleSelection.length; i++) {
            ids += this.multipleSelection[i].serverId + ",";
          }
          this.doDelete(ids);
        }).catch(() => {
        });
      },
      deleteEmp(row) {
        this.$confirm('此操作将永久删除[' + row.responsible + '], 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.doDelete(row.serverId);
        }).catch(() => {
        });
      },
      doDelete(ids) {
        this.tableLoading = true;
        let _this = this;
        this.deleteRequest("/server/" + ids).then(resp => {
          _this.tableLoading = false;
          if (resp && resp.status == 200) {
            let data = resp.data;
            _this.loadEmps();
          }
        })
      },
      keywordsChange(val) {
        if (val == '') {
          this.loadEmps();
        }
      },
      searchOffice() {
        this.loadEmps();
      },
      sizeChange(pageSize) {
        this.pageSize = pageSize;
        this.loadEmps();
      },
      currentChange(currentChange) {
        this.currentPage = currentChange;
        this.loadEmps();
      },
      loadEmps() {
        let _this = this;
        this.tableLoading = true;
        this.getRequest("/server/list?page=" + this.currentPage + "&size="+this.pageSize + "&responsible=" +  this.emp.responsible+"&useCompany="+this.emp.useCompany +
          "&useDepartment=" + this.emp.useDepartment).then(resp => {
          this.tableLoading = false;
          if (resp && resp.status === 200) {
            let data = resp.data;
            _this.emps = data.data.records;
            _this.totalCount = data.data.total;
//            _this.emptyEmpData();
          }
        })
      },
      addServer(formName) {
        let _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.emp.serverId) {
              //更新
              this.tableLoading = true;
              this.putRequest("/server", this.emp).then(resp => {
                _this.tableLoading = false;
                if (resp && resp.status === 200) {
                  var data = resp.data;
                  _this.dialogVisible = false;
                  _this.emptyEmpData();
                  _this.loadEmps();
                }
              })
            } else {
              //添加
              this.tableLoading = true;
              this.postRequest("/server", this.emp).then(resp => {
                _this.tableLoading = false;
                if (resp && resp.status === 200) {
                  var data = resp.data;

                  _this.dialogVisible = false;
                  _this.emptyEmpData();
                  _this.loadEmps();
                }
              })
            }
          } else {
            return false;
          }
        });
      },
      cancelEidt() {
        this.dialogVisible = false;
        this.emptyEmpData();
      },
      showDepTree() {
        this.showOrHidePop = !this.showOrHidePop;
      },
      showDepTree2() {
        this.showOrHidePop2 = !this.showOrHidePop2;
      },
      handleNodeClick(data) {
        this.emp.departmentName = data.name;
        this.emp.departmentId = data.id;
        this.showOrHidePop = false;
        this.depTextColor = '#606266';
      },
      handleNodeClick2(data) {
        this.emp.departmentName = data.name;
        this.emp.departmentId = data.id;
        this.showOrHidePop2 = false;
        this.depTextColor = '#606266';
      },
      initData() {
        this.getRequest("/server/basic").then(result => {
          let data = result.data;
          this.useCompanies = data.companies;
          this.useDepartments = data.departments;
        })
      },
      showEditOfficeView(row) {
        console.log(row)
        this.dialogTitle = "编辑员工";
        this.emp = row;
        this.emp.birthday = this.formatDate(row.birthday);


        this.dialogVisible = true;
      },
      showAddDataView() {
        this.dialogTitle = "新增数据";
        this.dialogVisible = true;
        let _this = this;
      },
      emptyEmpData() {
        this.emp = {
          serverId: '',
          responsible: '',
          useCompany: '',
          useDepartment: '',
          machineConfiguration: '',
          numbering: '',
          referenceBrand: '',
          quantity: '',
          unit: '',
          machineState: '',
          useState: '',
          remarks: ''
        }
      }
    }
  };
</script>
<style>
  .el-dialog__body {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .slide-fade-enter-active {
    transition: all .8s ease;
  }

  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
  }
</style>
